<template>
    <div class="VistorFoot">
        <span v-for="one in VistorFootData.VistorFootArray" @click="$store.commit('goto',one.router)">{{one.name}}</span>
    </div>
</template>

<script>

    export default {
        props:['index'],
        name: '',
        data() {
            return {
                data:{

                },
                VistorFootData:{
                    VistorFootArray:[
                        {
                            name:'首页',
                            router:'/vistor'
                        },{
                            name:'注册登录',
                            router:'#'
                        },{
                            name:'小游戏',
                            router:'/vistor/games/menu'
                        },{
                            name:'人脸识别',
                            router:'/vistor/faceRecognition'
                        }
                    ]
                }
            }
        },
        components: {

        },
        mounted() {
            $('.VistorFoot span').eq(this.index).css({
                color:'white',
                background:'black'
            })
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .VistorFoot{
        width: 100%;
        height: 100%;
        display: inline-block;
        justify-content: space-between;
        flex-grow: 1;
        box-shadow: -1px 0px 2px .1px black;
    }
    .VistorFoot span{
        display: inline-block;
        height: 100%;
        width: 25%;
        flex-grow: 1;
        line-height: 30px;
    }
</style>